<template>
	<view class="tab-box">
		<view :class="index == currentActive ? 'tab-item active' :'tab-item'" :id="'tab-item-' + index" v-for="(item,index) in tabs" :key="index" v-on:click="tabClick" :data-index="index">
			{{item}}
		</view>
		<view :style="[{ left: market_left,width: underlineWidth +'rpx' }]" class="market-underline"></view>
		<!-- <view :style="[{ left: market_left, width: market_width + 'px' }]" class="market-underline"></view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				market_left: 0,
				market_width: 0,
			}
		},
		props: {
			underlineWidth: {
				type: Number,
				default: 48
			},
			tabs: {
				type: Array,
				default: () => ["全部","收入","提现"]
			},
			currentActive: {
				type: Number,
				default: 0
			}
		},
		mounted(){
			uni.createSelectorQuery().in(this).select('#tab-item-'+ this.currentActive).boundingClientRect().exec((res)=>{
				this.market_left = res[0].left+ 64 + 'px';
				this.market_width = res[0].width;
			});
		},
		methods: {
			tabClick(e){
				let target = e.target;
				this.activeAction(target);
				this.$emit('tabClick',{index: target.dataset.index})
			},
			activeAction(target){
				let index = Number(target.dataset.index);
				this.market_left = target.offsetLeft + 64 + 'px';
				uni.createSelectorQuery().in(this).select('#tab-item-' + index).boundingClientRect().exec((res)=>{
					this.market_width = res[0].width;
				});
			}
		}
	}
</script>

<style scoped>
	.tab-box{
		position: relative;
		width: 100%;
		height: 90rpx;
		display: flex;
		z-index: 10;
		background-color: white;
		font-size: 28rpx;
		align-items: center;
		justify-content: space-around;
		color: #838583;
	}
	.tab-item{
		line-height: 90rpx;
		height: 100%;
		flex: 1;
		text-align: center;
	}
	.tab-item.active{
		font-weight: bold;
		color: #323332;
		font-size: 32rpx;
	}
	.market-underline{
		transition: 0.5s;
		position: absolute;
		bottom: 0;
		/* width: 48rpx; */
		height: 8rpx;
		background: #FFBB33;
		border-radius: 4rpx;
		display: inline-block;
		left: 50%;
		margin-left: -24rpx;

	}
</style>
